<template>
  <div id="my">
    <div class="login-img" v-if="!isLoggedIn">
      <img src="../assets/my-bgimg.png" alt="">
    </div>

    <div class="login-register" v-if="!isLoggedIn">
      <div class="login-module-btn" @click="showLogin">登录<span>YUNQI 云栖</span></div>
      <div class="register-module-btn">还没有账号？点击<u @click="showRegisterModule">注册</u></div>
      <div class="agreement-module">
        <div class="circle" :class="{ active: agreementActive }" @click="toggleAgreement">✓</div>
        我已阅读并同意
        <span>《用户服务协议》</span>
        和
        <span>《隐私政策》</span>
      </div>


    </div>

    <div class="logged-in-page" v-if="isLoggedIn">
      <div class="user-profile-section">
        <div class="user-bgimg" :style="{ backgroundImage: `url(${bgImage})` }">
          <div class="bg-overlay"></div>
          <div class="user-info-card">
            <div class="user" @click="showEditProfile">
              <div class="avatar-wrapper-modern">
                <div class="user-avatar" :style="{ backgroundImage: `url(${userAvatar})` }">
                  <div class="avatar-border"></div>
                </div>
                <div class="edit-badge">
                  <van-icon name="edit" />
                </div>
              </div>
              <div class="user-name">{{ userName }}</div>
              <div class="user-subtitle">点击编辑资料</div>
            </div>
          </div>
        </div>
      </div>

      <div class="content-section">
        <div class="user-note">
          <div class="user-note-header">
            <div class="header-title">
              <van-icon name="notes-o" />
              <span>我的小记</span>
            </div>
            <span class="view-all">全部 <span class="arrow">→</span></span>
          </div>

          <div class="produced-note">
            <div class="note-icon-wrapper">
              <van-icon name="edit" />
            </div>
            <span>制作小记</span>
          </div>
        </div>

        <div class="user-favorite">
          <div class="user-favorite-header">
            <van-icon name="star-o" />
            <span>我的收藏</span>
          </div>
          <div class="user-favorite-content">
            <div class="favorite-item" v-for="(item, index) in myIconData[0]" :key="index">
              <div class="favorite-icon-wrapper">
                <van-icon :name="getFavoriteIconName(item.text)" class="favorite-item-icon" />
              </div>
              <span>{{ item.text }}</span>
            </div>
          </div>
        </div>

        <div class="function-list">
          <div class="function-item" v-for="(item, index) in myIconData[1]" :key="index">
            <div class="function-icon-wrapper">
              <van-icon :name="getFunctionIconName(item.text)" class="function-item-icon" />
            </div>
            <div class="function-item-text">
              <span>{{ item.text }}</span>
              <span class="arrow-icon">→</span>
            </div>
          </div>
        </div>
      </div>

    </div>


    <input type="file" ref="avatarInput" style="display: none" accept="image/*" @change="handleAvatarSelect">
    <input type="file" ref="bgInput" style="display: none" accept="image/*" @change="handleBgSelect">

    <div class="edit-profile" v-if="showEditProfileModule"
      :class="{ 'slide-in': showEditProfileModule, 'slide-out': isEditProfileSlidingOut }">
      <div class="edit-profile-header">
        <van-icon name="arrow-left" class="close-edit-profile" @click="hideEditProfile" />
        <div class="edit-profile-title">编辑资料</div>
        <i></i>
      </div>
      <div class="basic-information">基本资料</div>
      <ul class="edit-profile-list">
        <li class="edit-avatar" @click="selectAvatar">
          <span>头像</span>
          <div class="avatar-img" :style="{ backgroundImage: `url(${userAvatar})` }"></div>
        </li>
        <li class="bg-img" @click="selectBgImage">
          <span>背景</span>
          <div>〉</div>
        </li>
        <li class="nickname" @click="showChangeName">
          <div>昵称 <span class="name">{{ userName }}</span>
          </div>
          <i class="one-icon one-icon-note"></i>
        </li>
        <li>
          <span>登录方式</span>
          <span>手机号登录</span>
        </li>
      </ul>

      <van-dialog v-model="isChangeName" title="修改昵称" show-cancel-button @confirm="changename">
        <input type="text" placeholder="请输入昵称" class="cName-input">
      </van-dialog>

      <div class="logout-section">
        <van-button type="danger" block round @click="onLogoutClick">退出登录</van-button>
      </div>

    </div>


  </div>
</template>

<script>
import { myIconData } from '../assets/myIconData';
import { Icon, Button } from 'vant';
import { gsap } from 'gsap';

export default {
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button
  },
  data() {
    return {
      myIconData: myIconData, // 我的页面图标数据
      agreementActive: false, // 协议是否同意
      isLoggedIn: false, // 用户是否已登录
      showEditProfileModule: false,// 是否显示编辑资料模块
      isEditProfileSlidingOut: false,// 是否退出编辑资料模块
      isChangeName: false,// 是否显示修改昵称模块

      // 默认值
      defaultAvatar: require('../assets/my/user-avatar.jpg'),
      defaultBgImage: require('../assets/my/user-bging.jpg'),
      // 用户资料（初始化为默认值）
      userAvatar: require('../assets/my/user-avatar.jpg'),// 用户头像
      bgImage: require('../assets/my/user-bging.jpg'),// 用户背景图
      userName: "",//用户昵称
      // 编辑资料时的初始值（用于检测是否有修改）
      initialEditData: {
        nickname: '',
        avatar: '',
        bgImage: ''
      },
      iconMapFavorite: {
        '日签': 'todo-list-o',
        '阅读': 'notes-o',
        '问答': 'comment-o',
        '长篇': 'description', // 若无该图标名，将回退为 bookmark-o
        '收音机': 'volume-o'
      },
      iconMapFunction: {
        '浏览历史': 'clock-o',
        '我的关注': 'friends-o',
        '投稿': 'edit',
        '关注我们': 'friends-o',
        '设置': 'setting-o'
      }
    }
  },
  created() {
    // 页面加载时检查登录状态
    const isLoggedIn = localStorage.getItem('isLoggedIn');
    if (isLoggedIn === 'true') {
      this.isLoggedIn = true;
      // 加载用户数据
      this.loadUserData();
    }

    // 监听登录成功事件
    this.$root.$on('loginSuccess', () => {
      this.isLoggedIn = true;
      this.loadUserData();
    });
  },
  mounted() {
    if (this.isLoggedIn) {
      this.animateLoggedIn();
    }
  },
  beforeDestroy() {
    this.$root.$off('loginSuccess');
  },
  watch: {
    isLoggedIn(newVal) {
      if (newVal) {
        this.$nextTick(() => this.animateLoggedIn());
      }
    },
    showEditProfileModule(newVal) {
      if (newVal) {
        this.$nextTick(() => {
          gsap.set('.edit-profile', { opacity: 1 });
          gsap.from('.edit-profile', { y: 40, duration: 0.28, ease: 'power2.out' });
        });
      }
    }
  },
  methods: {
    animateLoggedIn() {
      gsap.set(['.logged-in-page .user', '.user-favorite .favorite-item', '.function-list .function-item'], { opacity: 1 });
      gsap.from('.logged-in-page .user', { y: 16, duration: 0.32, ease: 'power2.out' });
      gsap.from('.user-favorite .favorite-item', { y: 10, duration: 0.2, stagger: 0.05, ease: 'power2.out' });
      gsap.from('.function-list .function-item', { y: 10, duration: 0.2, stagger: 0.04, ease: 'power2.out' });
    },

    getFavoriteIconName(text) {
      const name = this.iconMapFavorite[text];
      // 兼容性回退
      if (name === 'description') {
        return 'bookmark-o';
      }
      return name || 'bookmark-o';
    },
    getFunctionIconName(text) {
      return this.iconMapFunction[text] || 'setting-o';
    },

    // 切换协议同意状态
    toggleAgreement() {
      this.agreementActive = !this.agreementActive;
    },

    // 显示登录模块（调用全局登录组件）
    showLogin() {
      if (!this.agreementActive) {
        this.$toast({
          message: '登录/注册前请阅读并同意相关协议',
          position: 'top',
        });
        return;
      }
      this.$root.$emit('showLoginRegister', this.$route.path);
    },

    // 显示注册模块（调用全局登录组件）
    showRegisterModule() {
      if (!this.agreementActive) {
        this.$toast({
          message: '登录/注册前请阅读并同意相关协议',
          position: 'top',
        });
        return;
      }
      this.$root.$emit('showLoginRegister', this.$route.path);
    },

    // 退出登录
    logout() {
      localStorage.setItem('isLoggedIn', 'false');
      localStorage.removeItem('currentPhoneNumber');
      this.isLoggedIn = false;
      // 重置为用户默认值
      this.userName = "";
      this.userAvatar = this.defaultAvatar;
      this.bgImage = this.defaultBgImage;
      this.$toast({
        message: '已退出登录',
        position: 'top',
      });
    },

    // 点击退出 -> Vant2 确认弹窗
    onLogoutClick() {
      this.$dialog
        .confirm({
          title: '提示',
          message: '确认退出登录？'
        })
        .then(() => {
          this.logout();
          this.showEditProfileModule = false;
          this.$router.replace('/my');
        })
        .catch(() => { });
    },

    // 显示编辑资料模块
    showEditProfile() {
      // 保存当前的初始值，用于后续比较
      this.initialEditData = {
        nickname: this.userName,
        avatar: this.userAvatar,
        bgImage: this.bgImage
      };

      this.showEditProfileModule = true;
      this.isEditProfileSlidingOut = false;
    },

    // 隐藏编辑资料模块
    hideEditProfile() {
      // 在关闭前保存修改的数据
      this.saveEditDataIfChanged();

      this.isEditProfileSlidingOut = true;
      // 等待动画完成后隐藏元素
      setTimeout(() => {
        this.showEditProfileModule = false;
        this.isEditProfileSlidingOut = false;
      }, 300);
    },

    // 检测并保存编辑的数据（只有与默认值不同时才保存）
    saveEditDataIfChanged() {
      const currentPhone = localStorage.getItem('currentPhoneNumber');
      if (!currentPhone) return;

      const defaultNickname = this.getDefaultNickname(currentPhone);
      const users = JSON.parse(localStorage.getItem('users') || '[]');
      const userIndex = users.findIndex(u => u.phoneNumber === currentPhone);

      if (userIndex === -1) return;

      // 检测昵称：如果与初始值不同，才进行保存或删除操作
      if (this.userName !== this.initialEditData.nickname) {
        if (this.userName !== defaultNickname) {
          // 当前值不等于默认值，保存
          users[userIndex].nickname = this.userName;
        } else {
          // 当前值等于默认值，删除存储的昵称
          if (users[userIndex].nickname) {
            delete users[userIndex].nickname;
          }
        }
      }

      // 检测头像：如果与初始值不同，才进行保存或删除操作
      if (this.userAvatar !== this.initialEditData.avatar) {
        if (this.userAvatar !== this.defaultAvatar) {
          // 当前值不等于默认值，保存
          users[userIndex].avatar = this.userAvatar;
        } else {
          // 当前值等于默认值，删除存储的头像
          if (users[userIndex].avatar) {
            delete users[userIndex].avatar;
          }
        }
      }

      // 检测背景图：如果与初始值不同，才进行保存或删除操作
      if (this.bgImage !== this.initialEditData.bgImage) {
        if (this.bgImage !== this.defaultBgImage) {
          // 当前值不等于默认值，保存
          users[userIndex].bgImage = this.bgImage;
        } else {
          // 当前值等于默认值，删除存储的背景图
          if (users[userIndex].bgImage) {
            delete users[userIndex].bgImage;
          }
        }
      }

      // 保存更新后的users数组
      localStorage.setItem('users', JSON.stringify(users));
    },

    // 显示修改昵称弹窗
    showChangeName() {
      this.isChangeName = true;
    },

    // 选择头像
    selectAvatar() {
      this.$refs.avatarInput.click();
    },

    // 处理头像选择
    handleAvatarSelect(e) {
      const file = e.target.files[0];
      if (file) {
        this.readFileAsDataURL(file, (result) => {
          this.userAvatar = result;
          // 不立即保存，等关闭编辑资料模块时统一检测保存
        });
      }
      // 重置input值，以便可以重复选择同一文件
      e.target.value = '';
    },

    // 选择背景图
    selectBgImage() {
      this.$refs.bgInput.click();
    },

    // 处理背景图选择
    handleBgSelect(e) {
      const file = e.target.files[0];
      if (file) {
        this.readFileAsDataURL(file, (result) => {
          this.bgImage = result;
          // 不立即保存，等关闭编辑资料模块时统一检测保存
        });
      }
      // 重置input值，以便可以重复选择同一文件
      e.target.value = '';
    },

    // 通用方法：读取文件为DataURL
    readFileAsDataURL(file, callback) {
      const reader = new FileReader();
      reader.onload = (e) => {
        callback(e.target.result);
      };
      reader.readAsDataURL(file);
    },

    // 获取默认昵称（用户+手机号后四位）
    getDefaultNickname(phoneNumber) {
      const lastFour = phoneNumber.slice(-4);
      return `用户${lastFour}`;
    },

    // 加载用户数据（昵称、头像、背景图）
    loadUserData() {
      const currentPhone = localStorage.getItem('currentPhoneNumber');
      if (!currentPhone) return;

      const users = JSON.parse(localStorage.getItem('users') || '[]');
      const user = users.find(u => u.phoneNumber === currentPhone);

      if (user) {
        // 如果有昵称，使用存储的昵称，否则使用默认昵称
        this.userName = user.nickname || this.getDefaultNickname(currentPhone);

        // 如果有头像，使用存储的头像，否则使用默认头像
        if (user.avatar) {
          this.userAvatar = user.avatar;
        } else {
          this.userAvatar = this.defaultAvatar;
        }

        // 如果有背景图，使用存储的背景图，否则使用默认背景图
        if (user.bgImage) {
          this.bgImage = user.bgImage;
        } else {
          this.bgImage = this.defaultBgImage;
        }
      } else {
        // 如果没有找到用户，使用默认值
        this.userName = this.getDefaultNickname(currentPhone);
        this.userAvatar = this.defaultAvatar;
        this.bgImage = this.defaultBgImage;
      }
    },

    // 修改昵称
    changename() {
      const newName = document.querySelector('.cName-input').value;
      if (newName.trim() !== '') {
        this.userName = newName.trim();
        // 不立即保存，等关闭编辑资料模块时统一检测保存
        this.isChangeName = false;
      } else {
        this.$toast('昵称不能为空');
      }
    }
  }
}
</script>

<style scoped lang="less">
@import url('../assets/login-input-icon/iconfont.css');

#my {
  margin: 0;
  padding-bottom: 7vh;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}

.login-img {
  img {
    width: 100%;
  }
}

.login-register {
  width: 100%;
  height: 32vh;
  position: relative;

  .login-module-btn {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 10vh;
    aspect-ratio: 1/1;
    border-radius: 50%;
    color: #fff;
    background-color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 10px;
  }

  .register-module-btn {
    position: absolute;
    top: 12vh;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;

    u {
      text-underline-offset: 2px;
    }
  }

  >.agreement-module {
    position: absolute;
    top: 17vh;
  }

}

.logged-in-page {
  width: 100vw;
  min-height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  background: #f8fafc;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;

  .user-profile-section {
    position: relative;
    width: 100vw;
    height: 35vh;
    margin-bottom: -20px;

    .user-bgimg {
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: relative;

      .bg-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%);
      }

      .user-info-card {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 20px;
        box-sizing: border-box;
        background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.95) 70%, #fff 100%);
        border-radius: 24px 24px 0 0;

        .user {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 10px;
          cursor: pointer;
          transition: transform 0.2s ease;

          &:active {
            transform: scale(0.98);
          }

          .avatar-wrapper-modern {
            position: relative;
            margin-bottom: 5px;

            .user-avatar {
              width: 70px;
              height: 70px;
              border-radius: 50%;
              background-size: cover;
              background-position: center;
              background-repeat: no-repeat;
              position: relative;
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

              .avatar-border {
                position: absolute;
                top: -3px;
                left: -3px;
                right: -3px;
                bottom: -3px;
                border: 3px solid rgba(255, 255, 255, 0.8);
                border-radius: 50%;
              }
            }

            .edit-badge {
              position: absolute;
              bottom: 0;
              right: 0;
              width: 24px;
              height: 24px;
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #fff;
              font-size: 12px;
              box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
              border: 2px solid #fff;
            }
          }

          .user-name {
            color: #1f2937;
            font-size: 18px;
            font-weight: 600;
            margin-top: 5px;
          }

          .user-subtitle {
            color: #6b7280;
            font-size: 11px;
            margin-top: -5px;
          }
        }
      }
    }
  }

  .content-section {
    padding: 20px 15px;
    padding-top: 30px;
    box-sizing: border-box;
  }

  .user-note {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px;
    box-sizing: border-box;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

    .user-note-header {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 15px;

      .header-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 15px;
        font-weight: 600;
        color: #1f2937;

        .van-icon {
          font-size: 18px;
          color: #667eea;
        }
      }

      .view-all {
        color: #9ca3af;
        font-size: 12px;
        display: flex;
        align-items: center;
        gap: 4px;

        .arrow {
          transition: transform 0.2s ease;
        }

        &:hover .arrow {
          transform: translateX(3px);
        }
      }
    }

    .produced-note {
      height: 80px;
      border-radius: 12px;
      border: 2px dashed #d1d5db;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 13px;
      color: #6b7280;
      transition: all 0.2s ease;
      background: #f9fafb;

      &:hover {
        border-color: #667eea;
        background: #f3f4f6;
        color: #667eea;
      }

      .note-icon-wrapper {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 16px;
      }
    }
  }

  .user-favorite {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px;
    box-sizing: border-box;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

    .user-favorite-header {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: #1f2937;

      .van-icon {
        font-size: 18px;
        color: #f59e0b;
      }
    }

    .user-favorite-content {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .favorite-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 12px 8px;
        box-sizing: border-box;
        border-radius: 12px;
        transition: all 0.2s ease;
        cursor: pointer;

        &:hover {
          background: #f9fafb;
          transform: translateY(-2px);
        }

        .favorite-icon-wrapper {
          width: 40px;
          height: 40px;
          border-radius: 12px;
          background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s ease;

          .favorite-item-icon {
            font-size: 20px;
            color: #4b5563;
          }
        }

        &:hover .favorite-icon-wrapper {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          transform: scale(1.1);

          .favorite-item-icon {
            color: #fff;
          }
        }

        >span {
          font-size: 11px;
          color: #6b7280;
          font-weight: 500;
          text-align: center;
        }
      }
    }
  }

  .function-list {
    width: 100%;
    background-color: #fff;
    border-radius: 16px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

    .function-item {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 10px;
      box-sizing: border-box;
      border-radius: 12px;
      transition: all 0.2s ease;
      cursor: pointer;

      &:hover {
        background: #f9fafb;
      }

      .function-icon-wrapper {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        .function-item-icon {
          font-size: 18px;
          color: #4b5563;
        }
      }

      .function-item-text {
        flex: 1;
        font-size: 14px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #1f2937;

        .arrow-icon {
          color: #9ca3af;
          font-size: 16px;
          transition: transform 0.2s ease;
        }
      }

      &:hover .function-item-text .arrow-icon {
        transform: translateX(4px);
        color: #667eea;
      }

      &:not(:last-child) {
        border-bottom: 1px solid #f3f4f6;
      }
    }
  }
}

.agreement-module {
  width: 100%;
  font-size: 8px;
  color: #cdcdcd;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;

  .circle {
    height: 12px;
    aspect-ratio: 1/1;
    border: 1px solid #cdcdcd;
    border-radius: 50%;
    margin-right: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;

    &.active {
      background-color: #000;
      border-color: #000;
    }
  }

  span {
    color: #000;
  }
}

.edit-profile {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 12;
  transform: translateY(100%);
  transition: transform 0.3s ease;

  &.slide-in {
    transform: translateY(0);
    transition: transform 0.3s ease;
  }

  &.slide-out {
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  .edit-profile-header {
    width: 100%;
    height: 6vh;
    padding: 0 3vw;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .close-edit-profile {
      color: #aaa;
      font-size: 14px;
      cursor: pointer;
    }

    .edit-profile-title {
      font-size: 14px;
      font-weight: 350;
    }
  }

  .basic-information {
    height: 5vh;
    padding: 0 3vw;
    box-sizing: border-box;
    background-color: #f8f8f8;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 350;
  }

  .edit-profile-list {
    width: 100%;
    padding: 0 3vw;
    margin-top: 2vh;
    box-sizing: border-box;

    li {
      width: 100%;
      height: 6vh;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 350;
      cursor: pointer;

      &:not(:last-child) {
        border-bottom: 1px solid #eeeded;
      }
    }

    .avatar-img {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      height: 80%;
      aspect-ratio: 1/1;
      border-radius: 50%;
    }

    .name {
      margin-left: 3vw;
    }
  }
}

::v-deep .cName-input {
  width: 100%;
  padding: 1vh 3vw;
  box-sizing: border-box;
  margin-bottom: 2vh;
  font-size: 14px;
}

.logout-section {
  width: 100%;
  padding: 2vh 3vw 3vh;
  box-sizing: border-box;
}
</style>